<template>
  <el-card shadow="hover">
    <el-form
      label-width="100px"
      :model="spuFormData"
      :rules="spuFormRules"
      ref="spuFormRef"
    >
      <el-form-item label="SPU名称" prop="spuName">
        <el-input placeholder="请输入SPU名称" v-model="spuFormData.spuName" />
      </el-form-item>
      <el-form-item label="SPU描述" prop="spuDesc">
        <el-input
          type="textarea"
          placeholder="请输入SPU描述"
          v-model="spuFormData.spuDesc"
        />
      </el-form-item>
      <el-form-item label="品牌" prop="tmId">
        <el-select placeholder="请选择品牌" v-model="spuFormData.tmId">
          <el-option label="华为" value="11"></el-option>
          <el-option label="苹果" value="22"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SPU图片" prop="spuImageList">
        <el-upload
          v-model:file-list="spuFormData.spuImageList"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>

          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500KB.
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select placeholder="请选择销售属性">
          <el-option label="颜色" value="11"></el-option>
          <el-option label="版本" value="22"></el-option>
        </el-select>
        <el-button type="primary" class="btn">添加销售属性</el-button>
        <el-table border class="table">
          <el-table-column
            type="index"
            width="60"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column label="销售属性名"></el-table-column>
          <el-table-column label="销售属性值"></el-table-column>
          <el-table-column label="操作">
            <el-button>删除</el-button>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Spu",
});

import { ref, reactive } from "vue";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";
// 图片上传功能
const fileList = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
// 表单数据
const spuFormData = reactive({
  spuName: "",
  spuDesc: "",
  tmId: undefined,
  spuImageList: [],
  // spuSaleAttrList: [],
});
// 表单校验规则
const spuFormRules = reactive({
  // 校验规则的名称要和数据名称一致
  spuName: [{ required: true, message: "请输入SPU名称", trigger: "blur" }],
  spuDesc: [{ required: true, message: "请输入SPU描述", trigger: "blur" }],
  tmId: [{ required: true, message: "请选择SPU品牌", trigger: "blur" }],
  spuImageList: [{ required: true, message: "请上传SPU图片" }],
});

const spuFormRef = ref();

const submit = async () => {
  await spuFormRef.value.validate();
};

// const submit = () => {
//   spuFormRef.value.validate((valid: boolean) => {
//     if (valid) {
//       // 通过
//     } else {
//       // 失败
//     }
//   })
// }
</script>

<style scoped>
.btn {
  margin-left: 20px;
}
.table {
  margin-top: 20px;
}
</style>
